<template>
  <div style="margin-top: 10px">
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form :model="form" ref="form" label-width="100px" :label-position="type == 'detail' ? 'right' : 'top'" :rules="rules">
        <div class="card-title-wrap">
          <span>{{ form.workOrderScheme == 1 ? '选择工单' : '催收信息' }}</span>
          <span></span>
        </div>
        <table-page
          v-if="form.workOrderScheme == 1"
          :maxHeight="300"
          style="width: 98%; margin: 0 auto"
          :dataList="form.selectiveWorkOrder"
          border
          :total="totalDig"
          :page.sync="queryParamsDigRadio.pageNum"
          :limit.sync="queryParamsDigRadio.pageSize"
        >
          <!-- 普通列插槽 -->
          <template slot="tableCol">
            <el-table-column label="" align="center" width="35">
              <template scope="scope">
                <el-radio :label="scope.row.id" v-model="radio" @change="changeRadio">{{}}</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="催收编号" align="center" prop="code" min-width="120px" show-overflow-tooltip />
            <el-table-column label="客户名称" align="center" prop="customerName" min-width="160px" show-overflow-tooltip />
            <el-table-column label="累计应收金额" align="center" prop="totalReceivableAmount">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.totalReceivableAmount) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="累计已收金额" align="center" prop="totalReceivedAmount">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.totalReceivedAmount) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="累计待收金额" align="center" prop="totalToBeReceived">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.totalToBeReceived) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="累计销账金额" align="center" prop="totalWriteOffAmount">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.totalWriteOffAmount) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="催收进度" align="center" prop="collectionProgress">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.collection_progress" :value="scope.row.collectionProgress" />
              </template>
            </el-table-column>
            <el-table-column label="处理人" align="center" prop="processedByNames" min-width="120px" show-overflow-tooltip />
            <el-table-column label="创建时间" align="center" prop="createTime" min-width="120px" show-overflow-tooltip />
          </template>
        </table-page>
        <div :style="{ marginLeft: type == 'detail' ? '' : '50px' }">
          <el-form-item label="处理人调整:" v-if="form.workOrderScheme == 1" prop="processorNames">
            <el-input :disabled="radio == ''" style="width: 30%" type="textarea" v-model="form.processorNames" :placeholder="radio == '' ? '请先选择工单' : '请点击选择处理人'" readonly @click.native="changeDig"></el-input>
          </el-form-item>
          <el-form-item label="催收策略:" prop="collectionStrategy">
            <el-radio-group v-model="form.collectionStrategy">
              <el-radio v-for="item in dict.type.collection_strategy" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="处理人:" v-if="form.workOrderScheme == 2" prop="processorNames">
            <el-input style="width: 30%" type="textarea" v-model="form.processorNames" placeholder="请点击选择处理人" readonly @click.native="changeDig"></el-input>
          </el-form-item>
          <el-form-item label="说明:">
            <el-input style="width: 70%" type="textarea" :rows="5" placeholder="请输入内容" v-model="form.remark" maxlength="500" show-word-limit> </el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 添加或修改测试单表对话框 -->
    <el-dialog title="选择人员" :visible.sync="open" append-to-body class="form-dialog" width="70%">
      <SearchContent :queryParams="queryParamsDig" @query="handleQueryDig" @reset="resetQueryDig">
        <el-form :model="queryParamsDig" label-width="100px">
          <el-col :span="9">
            <el-form-item label="用户名称:">
              <el-input style="width: 100%" v-model="queryParamsDig.nickName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="手机号码:">
              <el-input style="width: 100%" v-model="queryParamsDig.phonenumber" maxlength="11" @input="queryParamsDig.phonenumber = queryParamsDig.phonenumber.replace(/[^\d]/g, ' ')"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </SearchContent>
      <el-row>
        <table-page
          ref="el-table"
          rowKey="userId"
          :isSelect="true"
          @selectionChange="handleSelectionChange"
          :loading="loading"
          :dataList="dataList"
          border
          :total="total"
          :page.sync="queryParamsDig.pageNum"
          :limit.sync="queryParamsDig.pageSize"
          @setSizeCurrent="getList"
        >
          <!-- 普通列插槽 -->
          <template slot="tableCol">
            <el-table-column label="用户名称" align="center" prop="nickName" />
            <el-table-column label="手机号码" align="center" prop="phonenumber" />
            <el-table-column label="组织名称" align="center" prop="dept.allDeptName" min-width="140px" show-overflow-tooltip />
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <span>{{ scope.row.status == 0 ? '正常' : '停用' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
          </template>
        </table-page>
      </el-row>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchContent from '@/components/SearchContent/index.vue'
import { getUseList } from '@/api/collectionModule'
export default {
  // 工单方案
  name: 'workOrder',
  dicts: ['collection_strategy', 'collection_progress'],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  watch: {
    dataList: {
      handler(Val) {
        this.$nextTick(() => {
          Val.forEach((v) => {
            this.form.processorIds.forEach((j) => {
              if (v.userId == j) {
                this.$refs['el-table'].table_toggleRowSelection(v, true)
              }
            })
          })
        })
      },
      immediate: true, // 立即生效
      deep: true, //监听对象或数组的时候，要用到深度监听
    },
    radio: {
      handler(Val) {
        let newVal = this.value?.selectiveWorkOrder?.find((item) => item.id == Val)
        this.form.processorNames = newVal?.processedByNames
        this.form.processorIds = newVal?.processedByIds?.split(',')
      },
      immediate: true, // 立即生效
      deep: true, //监听对象或数组的时候，要用到深度监听
    },
    'value.workOrderScheme': {
      handler(Val, newVal) {
        if (Val) {
          console.log(Val, newVal)
          if (Val !== newVal) {
            this.$refs['form']?.clearValidate()
            this.radio = ''
            this.value.processorIds = []
            this.value.processorNames = ''
            this.$set(this.value, 'collectionStrategy', '1')
            this.$set(this.value, 'remark', '')
            this.$refs['el-table']?.table_clearSelection()
          }
        }
      },
      immediate: true, // 立即生效
      deep: true, //监听对象或数组的时候，要用到深度监听
    },
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  components: {
    SearchContent,
  },
  data() {
    return {
      queryParamsDigRadio: {
        pageNum: 1,
        pageSize: 5,
      },
      totalDig: 0,
      pattern: /^1[3-9]\d{9}$/,
      multipleSelection: [],
      total: 0,
      dataList: [],
      // 遮罩层
      loading: false,
      open: false,
      queryParamsDig: {
        pageNum: 1,
        pageSize: 10,
      },
      rules: {
        collectionStrategy: [{ required: true, message: '请选择催收策略', trigger: 'change' }],
      },
      radio: '',
    }
  },
  created() {},
  methods: {
    // 单选切换
    changeRadio() {
      this.$refs['el-table']?.table_clearSelection()
      let collectionStrategy = this.form.selectiveWorkOrder.filter((v) => v.id == this.radio)[0]?.collectionStrategy.toString()
      console.log(collectionStrategy, '000')
      this.$set(this.value, 'collectionStrategy', collectionStrategy)
    },
    validate() {
      let flag = false
      this.$refs['form'].validate((valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      getUseList(this.queryParamsDig).then((res) => {
        if (res.code == '200') {
          const { rows, total } = res
          this.dataList = rows
          this.total = total
          this.loading = false
        }
      })
    },
    // 多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.form.processorNames = this.multipleSelection.map((v) => v.nickName).toString()
    },
    resetQueryDig() {
      this.queryParamsDig = {
        pageNum: 1,
        pageSize: 10,
      }
      this.getList()
    },
    handleQueryDig() {
      this.getList()
    },
    submitForm() {
      this.open = false
      this.form.processorIds = this.multipleSelection.map((v) => v.userId)
    },
    cancel() {
      this.open = false
    },
    changeDig() {
      this.queryParamsDig.pageNum = 1
      this.open = true
      this.form.processorIds = [...new Set(this.form.processorIds)]
      console.log(this.form.processorIds, '0-0-0')
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
    font-size: 16px;
  }
}
.el-input.is-readonly .el-input__inner:hover {
  cursor: pointer !important;
}
</style>
